<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/' }">运营</el-breadcrumb-item>
			<el-breadcrumb-item>秒杀活动列表</el-breadcrumb-item>
		</el-breadcrumb>

		<el-card>
			<div slot="header">
				<i class="el-icon-search"></i>
				<span>筛选查询</span>
				<br />
				<br />
				<!-- 表单搜索 -->
				<el-form :inline="true">
					<el-form-item label="活动名称">
						<el-input v-model="searchForm.title"></el-input>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" @click="search">查询</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div align="right">
				<el-button type="primary" @click="addActivity">添加活动</el-button>
				<el-button type="primary" @click="spikeDate">秒杀时间段列表</el-button>
			</div>
			<!-- 数据表单 -->
			<el-table :data="tableData" border>
				<el-table-column label="编号" prop="id" align="center"></el-table-column>

				<el-table-column label="活动标题" prop="title" align="center"></el-table-column>

				<el-table-column label="活动状态" align="center">
					<template slot-scope="scope">
						<span
							v-if="new Date(scope.row.endTime)>new Date()&&new Date(scope.row.startTime)<new Date()&&scope.row.status==1"
						>活动正在进行中</span>
						<span v-else-if="new Date(scope.row.startTime)>new Date()&&scope.row.status==1">活动尚未开始</span>
						<span v-else>活动已下架或截止</span>
					</template>
				</el-table-column>
				<el-table-column label="开始时间" prop="startTime" align="center">
					<template slot-scope="scope">{{scope.row.startTime|dateFormat}}</template>
				</el-table-column>
				<el-table-column label="结束时间" prop="endTime" align="center">
					<template slot-scope="scope">{{scope.row.endTime|dateFormat}}</template>
				</el-table-column>
				<el-table-column label="上线/下架" align="center">
					<template slot-scope="scope">
						<el-switch
							v-model="scope.row.status"
							active-color="#13ce66"
							inactive-color="#ff4949"
							active-value="1"
							inactive-value="0"
							@change="statusChange(scope.row)"
						></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<el-button type="text" @click="setUpProducts">设置商品</el-button>
						<el-button type="text" @click="editByid(scope.row.id)">编辑</el-button>
						<el-button type="text" @click="deleteByid(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>

			<!-- 分页开始 -->
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="this.page"
				:page-sizes="[5,10,15,20]"
				:page-size="this.size"
				layout="total, sizes, prev, pager, next, jumper"
				:total="this.total"
			></el-pagination>
			<!-- 分页结束 -->
		</el-card>

		<!-- dialog添加对话框 -->
		<el-dialog :title="activityForm.id==null?'添加活动':'编辑活动'" :visible.sync="dialogVisible" width="50%">
			<!-- 表单数据 -->
			<el-form label-width="70px" status-icon :rules="rules" :model="activityForm" ref="memberForm">
				<el-form-item label="活动标题" label-width="100" prop="title">
					<el-input v-model="activityForm.title" style="width:300px"></el-input>
				</el-form-item>
				<el-form-item label="开始时间" label-width="100" prop="startTime">
					<el-date-picker v-model="activityForm.startTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
				</el-form-item>
				<el-form-item label="结束时间" label-width="100" prop="endTime">
					<el-date-picker v-model="activityForm.endTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
				</el-form-item>
				<el-form-item label="上线/下架" label-width="100">
					<el-radio-group v-model="activityForm.status">
						<el-radio label="1">上架</el-radio>
						<el-radio label="0">下架</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<!-- 表单数据结束 -->
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false; activityFormForm={}">取 消</el-button>
				<el-button type="primary" @click="addCommit('memberForm')">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	data() {
		var validateTitle = (rule, value, callback) => {
			let filterRule = /[^\u4e00-\u9fa5a-zA-Z0-9\w]/g
			//let hanziRule=/[^\u4e00-\u9fa5]/g
			let shuzi = /^[0-9]/g
			if (value === "") {
				callback(new Error("请输入标题"))
			}
			if (filterRule.test(value)) {
				callback(
					new Error(
						"含有非法字符(只能输入中文或字母,并且长度不能超过30个)"
					)
				)
			}
			if (shuzi.test(value)) {
				callback(new Error("不能以数字开头"))
			}
			if (value.length < 1) {
				callback(new Error("最少输入一个字母或汉字"))
			}
			if (value.length > 30) {
				callback(new Error("长度不能超过30"))
			} else {
				callback()
			}
		}
		var validateStartTime = (rule, value, callback) => {
			if (value === "") {
				callback(new Error("请选择开始日期"))
			} else {
				callback()
			}
		}

		var validateEndTime = (rule, value, callback) => {
			if (value === "") {
				callback(new Error("请选择截止日期"))
			}
			if (value <= this.activityForm.startTime) {
				callback(new Error("活动截止日期不能小于开放日期"))
			} else {
				callback()
			}
		}

		return {
			tableData: [],
			searchForm: {},
			activityForm: {
				title: "",
				startTime: "",
				endTime: "",
				status: "1",
			},
			page: 1,
			total: 0,
			size: 10,
			statu: 1,
			dialogVisible: false,
			//表单验证
			rules: {
				title: [
					{
						required: true,
						validator: validateTitle,
						trigger: "blur",
					},
				],
				endTime: [
					{
						required: true,
						validator: validateEndTime,
					},
				],
				startTime: [
					{
						required: true,
						validator: validateStartTime,
					},
				],
			},
		}
	},
	methods: {
		async getactivity() {
			const { data: res } = await this.$http.post(
				`business/activity/findPage?page=${this.page}&size=${this.size}`,
				this.searchForm
			)
			if (res.code == 200) {
				console.log(res.data)
				this.$message.success("查询成功")
				this.tableData = res.data.rows
				this.total = res.data.total
			}
		},

		handleSizeChange(val) {
			this.size = val
			this.getactivity()
		},

		handleCurrentChange(val) {
			this.page = val
			this.getactivity()
		},

		async statusChange(row) {
			const { data: res } = await this.$http.post(
				`business/activity/updateStatus`,
				row
			)
		},

		addActivity() {
			this.dialogVisible = true
		},

		spikeDate() {},

		search() {
			this.getactivity()
		},
		addCommit(memberForm) {
			this.$refs[memberForm].validate(async (valid) => {
				if (valid) {
					const { data: res } = await this.$http.post(
						`business/activity/insert`,
						this.activityForm
					)
					if (res.code == 200) {
						this.$message.success("新增成功")
						this.dialogVisible = false
						this.getactivity()
						this.activityForm = {}
						return
					}
				}
				alert("请输入必填项")
			})
		},
		async deleteByid(id) {
			const { data: res } = await this.$http.post(
				`business/activity/deleteByid?id=${id}`
			)
			if (res.code == 200) {
				this.$message.success("删除成功")
				this.getactivity()
				return
			}
			this.$message.error("删除失败")
		},
		async editByid(id) {
			this.activityForm.id = id
			this.dialogVisible = true
			const { data: res } =await this.$http.get(
				`business/activity/findByid?id=${id}`
			)
			if(res.code==200){
				this.activityForm=res.data
			}
		},
		setUpProducts() {},
	},
	created() {
		this.getactivity()
	},
}
</script>

<style>
</style>